<template>
  <div class="bigWarpper w">
    <!-- 左边表单部分 -->
    <div class="left">
      <h3>发表新攻略</h3>
      <span class="discribe">分享你的个人游记，让更多人看到哦!</span>
      <el-form :model="form" label-width="80px">
        <el-input
          placeholder="请输入标题"
          v-model="form.title"
          clearable
          class="title"
        >
        </el-input>

        <client-only>
          <VueEditor
            v-model="form.content"
            id="content"
            useCustomImageHandler
            @image-added="uploadImage"
          />
        </client-only>

        <el-form-item label="选择城市">
          <el-autocomplete
            class="inline-input"
            v-model="form.city"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
          ></el-autocomplete>
        </el-form-item>
      </el-form>
      <div class="pubWarpper">
        <span class="publish" @click="handleSubmit">发 布</span>
        或者
        <span class="draft" @click="hanleDraft">保存到草稿</span>
      </div>
    </div>

    <!-- 右边草稿箱部分 -->
    <div class="right">
      <div class="draftTitle">
        草稿箱（{{ $store.state.draft.draftList.length }}）
      </div>
      <div v-for="(item, index) in $store.state.draft.draftList" :key="index">
        <div class="draftPostTitle">{{ item.title }}</div>
        <div class="info">
          <span class="date">{{ item.date }}</span>
          <div class="control">
            <i class="el-icon-edit" @click="editDraft(index)"></i>
            <i class="el-icon-delete" @click="removeDraft(index)"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      form: {
        title: "",
        content: "",
        city: "",
      },
    };
  },
  mounted() {},

  methods: {
    // 城市输入建议
    querySearch(queryString, cb) {
      this.$axios({
        url: "/airs/city",
        params: {
          name: queryString,
        },
      }).then((res) => {
        const cityList = res.data.data.map((item) => {
          return {
            ...item,
            value: item.name,
          };
        });
        cb(cityList);
      });
    },
    // 点击提交按钮，发送请求
    handleSubmit() {
      this.isNull();
      if (this.$store.state.user.userInfo.token) {
        this.$axios({
          headers: {
            Authorization: "Bearer " + this.$store.state.user.userInfo.token,
          },
          url: "/posts",
          method: "post",
          data: this.form,
        }).then((res) => {
          if (res.data.message == "新增成功") {
            this.$message.success(res.data.message);
            this.form.title = "";
            this.form.content = "";
            this.form.city = "";
          }
        });
      } else {
        this.$router.push({
          path: "/user/login",
          query: {
            url: this.$route.path,
          },
        });
      }
    },

    // 点击保存草稿
    hanleDraft() {
      // 判断标题是否为空
      if (!this.form.title) {
        this.$message.error("标题不能为空");
        return;
      }
      // 以登录状态处理
      if (this.$store.state.user.userInfo.token) {
        // 添加date日期字段
        const date = moment(Date()).format("YYYY-MM-DD");
        this.form = {
          ...this.form,
          date,
        };
        this.$store.commit("draft/addDraft", this.form);
      }
      // 未登录状态处理
      else {
        this.$router.push({
          path: "/user/login",
          query: {
            url: this.$route.path,
          },
        });
      }
    },

    // 点击删除草稿
    removeDraft(index) {
      this.$store.commit("draft/removeDraft", index);
    },
    // 点击修改内容
    editDraft(index) {
      this.form.title = this.$store.state.draft.draftList[index].title;
      this.form.content = this.$store.state.draft.draftList[index].content;
      this.form.city = this.$store.state.draft.draftList[index].city;
    },
    // 富文本框上传图片处理
    uploadImage(file, Editor, cursorLocation, resetUploader) {
      const data = new FormData();
      data.append("files", file);
      this.$axios({
        // headers:{
        //   Authorization:'Bearer ' + this.$store.state.user.userInfo.token
        // },
        method: "post",
        data,
        url: "/upload",
      }).then((res) => {
        const url = this.$axios.defaults.baseURL + res.data[0].url;
        Editor.insertEmbed(cursorLocation, "image", url);
        resetUploader();
      });
    },
    isNull() {
      if (!this.form.title) {
        this.$confirm("请输入标题", { type: "warning", title: "提示" });
        return;
      }
      if (!this.form.content) {
        this.$confirm("请输入内容", { type: "warning", title: "提示" });
        return;
      }
      if (!this.form.city) {
        this.$confirm("请输入城市", { type: "warning", title: "提示" });
        return;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.w {
  width: 1000px;
  margin: 20px auto;
}

// 提交表单部分
.left {
  width: 750px;
  h3 {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 10px;
  }
  .discribe {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
  }
  .title {
    margin-bottom: 10px;
  }
  /deep/ .city {
    width: 200px;
  }
  .pubWarpper {
    font-size: 14px;
    .publish {
      padding: 10px 15px;
      background: #409eff;
      color: #fff;
      font-size: 12px;
      border-radius: 6px;
      margin-bottom: 30px;
      &:hover {
        cursor: pointer;
      }
    }
    .draft {
      color: #ffa500;
      &:hover {
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
}

// 草稿箱部分s
.bigWarpper {
  position: relative;
  .right {
    width: 200px;
    padding: 10px;
    border: 1px solid #dddddd;
    position: absolute;
    right: 0;
    top: 0;
    .draftTitle {
      color: #666666;
    }
    .draftPostTitle {
      margin-top: 15px;
      font-size: 14px;
      &:hover {
        text-decoration: underline;
        color: #ffa500;
        cursor: pointer;
      }
    }
    .info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .date {
        font-size: 14px;
        color: #999;
      }
    }
  }
}

/deep/ #content {
  height: 450px;
  margin-bottom: 10px;
}
</style>